<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="plujins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .container-fluid{
            background-color: pink;
            height: 200px;
        }
    </style>
    <title>表单</title>
</head>
<body>
<div class="row">
    <form action="#" class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
        <input type="text" class="form-control"><br>
        <input type="text" class="form-control input-gl"><br>
        <input type="text" class="form-control input-sm"><br>
        <input type="submit">
    </form>
</div>
<div class="row">
    <form action="#" class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
        <select name="city" id="city" class="form-control" style="width: 100px;display: inline">
            <option value="beijing">北京</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
        </select>
        <select name="city" id="citys" class="form-control" style="width: 100px;display: inline" multiple="multiple">
            <option value="beijing">北京</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
        </select>
        <input type="submit">
    </form>
</div>
<div class="row">
    <form action="#" class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
        <label for="descript">自我介绍</label><textarea name="descript" id="descript" cols="10" rows="20" class="form-control"></textarea>
        <input type="submit">
    </form>
</div>
<div class="row">
    <form action="#" class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
        <div class="radio">
            <label for="sang">
                <input  class="form-control" type="radio" id="sang" name="hobby">唱歌
            </label>
        </div>
        <div class="radio">
            <label for="dance">
                <input  class="form-control" type="radio" id="dance" name="hobby">跳舞
            </label>
        </div>

        <div class="radio">
            <label for="sang1" >
                <input type="radio" id="sang0" name="hobby">唱歌
            </label>
            <label for="dance1" >
                <input type="radio" id="dance0" name="hobby">跳舞
            </label>
        </div>
        <div class="radio">
            <label for="sang1" class="radio-inline">
                <input type="radio" id="sang1" name="hobby">唱歌
            </label>
            <label for="dance1" class="radio-inline">
                <input type="radio" id="dance1" name="hobby">跳舞
            </label>
        </div>
<!--s-------------------------------------------------------------------------------------------------------d-->
        <div class="checkbox">
            <div class="checkbox">
                <label for="sang" >
                    <input type="checkbox" id="man2" name="hobby">男
                </label>
            </div>
            <div class="checkbox">
                <label for="sang">
                    <input type="checkbox" id="wuman2" name="hobby">女
                </label>
            </div>
        </div>
        <div class="checkbox">
            <label for="man">
                <input type="checkbox" id="man" name="hobby">男
            </label>
            <label for="wuman">
                <input type="checkbox" id="wuman" name="hobby">女
            </label>
        </div>
        <div class="checkbox">
            <label for="sang" class="checkbox-inline">
                <input type="checkbox" id="man1" name="hobby">男
            </label>
            <label for="sang" class="checkbox-inline">
                <input type="checkbox" id="wuman1" name="hobby">女
            </label>
        </div>

        <input type="submit">
    </form>
</div>
<div class="container" style="width: 800px">
        <form action="#" role="form" class="form-horizontal" >
            <h1 class="text-center">水平表单</h1>
            <div class="form-group">
                <label for="email" class="control-label col-md-3">邮箱</label>
                <div class="col-md-7">
                    <input type="email" class="form-control" placeholder="邮箱" id="email">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="control-label  col-md-3">password</label>
                <div class="col-md-7">
                    <input type="password" class="form-control" placeholder="password" id="password">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">爱好</label>
                <div class="col-md-7">
                    <label for="sang" class="checkbox-inline">
                        <input type="checkbox" name="hobby"> 唱歌
                    </label>
                    <label for="dance" class="checkbox-inline">
                        <input type="checkbox" name="hobby"> 跳舞
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">城市</label>
                <div class="col-md-7">
                    <select class="form-control" name="city" id="city2">
                        <option value="defalut">请选择城市</option>
                        <option value="beijing">北京</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">个人简介</label>
                <div class="col-md-7">
                    <textarea class="form-control" name="decribete" id="decribete" cols="30" rows="10" ></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-4">
                    <button class="btn btn-info col-md-6 ">提交</button>
                </div>
            </div>
        </form>
</div>
<!--ds----------------------------------- -->
<div class="container" style="width: 800px">
    <form action="#" role="form" class="form-inline" >
        <h1 class="text-center">内联表单</h1>
        <div class="form-group">
            <label for="name">name</label>
            <input  class="form-control" type="text" name="name" id="name">
        </div>
        <div class="form-group">
            <label for="name">password</label>
            <input  class="form-control" type="password" name="password" id="password1">
        </div>
        <div class="form-group">
                <button class="btn btn-info  ">提交</button>
        </div>
    </form>
</div>
<hr>
<style>
    .center{
        text-align: center;
    }
</style>
<div class="col-md-12">
    <h1 class="center">form占据父元素的100%,提交按钮在最右侧</h1>
    <form action="#" class="form-horizontal ">
        <label for="config">config:</label><textarea name="config" id="config" cols="10" rows="20" class="form-control"></textarea>
        <input type="submit" class="btn btn-default col-lg-1 col-lg-offset-11">
    </form>
</div>
</body>
<script src="js/jquery-3.2.js"></script>
<script src="plujins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>